<!DOCTYPE html>
<html>
<head>
    <script src="/kissy/build/seed-debug.js"></script>
    <script src="/kissy/src/package.js"></script>
</head>
<body>
<div id="t" style="border:1px solid red;width:100px;height:100px"></div>
<br><br><br><br><br>

<div id="t2" style="border:1px solid red;width:100px;height:100px"></div>
<script>
    var S = KISSY;
    KISSY.use('feature', function (S, Feature) {
        var vendorPrefix = Feature.getCssVendorInfo('transition').propertyNamePrefix;
        var TRANSITION_END_EVENT = vendorPrefix ?
            // webkitTransitionEnd !
                (vendorPrefix.toLowerCase() + 'TransitionEnd') :
                'transitionend';
        var TRANSITION = vendorPrefix ?
            // webkitTransitionEnd !
                (vendorPrefix.toLowerCase() + 'Transition') :
                'transition';
        var t = document.getElementById('t');
        var tStyle = t.style;
        // force compute width
        t.offsetWidth;
        tStyle[TRANSITION] = 'width 2s linear 0s';
        t.addEventListener('webkitTransitionEnd', function (e) {
            alert(e.propertyName);
        }, false);
        tStyle.width = '200px';
    });

    KISSY.use('anim', function (S, Anim) {
        new Anim('#t2', {
            width: '200px'
        }, {
            duration: 2,
            complete: function () {
                alert(1);
            }
        }).run();
    });
</script>
</body>
</html>